<template>
    <div class="box">
        <!-- 左侧导航栏 -->
        <div class="left">
            <div class="one">
                <el-icon color="#666">
                    <WarningFilled />
                </el-icon>
                <span>菜单列表</span>
            </div>
            <el-scrollbar class="scrollbar">
                <div class="list">
                    <!-- 导航栏 -->
                    <el-menu active-text-color="#409eff" background-color="#fff" text-color="#666">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>商品信息</span>
                            </template>
                            <el-menu-item index="1-1">
                                <span>商品分类</span>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <span>商品信息</span>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <span>商品信息tree</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item index="2-1">
                                <span>订单管理</span>
                            </el-menu-item>
                            <el-menu-item index="2-2">
                                <span>新订单</span>
                            </el-menu-item>
                            <el-menu-item index="2-3">
                                <span>采购订单</span>
                            </el-menu-item>
                            <el-menu-item index="2-4">
                                <span>退货订单</span>
                            </el-menu-item>
                            <el-menu-item index="2-5">
                                <span>订单详情</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>客户管理</span>
                            </template>
                            <el-menu-item index="3-1">
                                <span>客户管理</span>
                            </el-menu-item>
                            <el-menu-item index="3-2">
                                <span>省市县</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>一对多表</span>
                            </template>
                            <el-menu-item index="4-1">
                                <span>产品管理</span>
                            </el-menu-item>
                            <el-menu-item index="4-2">
                                <span>产品颜色</span>
                            </el-menu-item>
                            <el-menu-item index="4-3">
                                <span>产品尺寸</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>流程管理</span>
                            </template>
                            <el-menu-item index="5-1">
                                <span>审批流程</span>
                            </el-menu-item>
                            <el-menu-item index="5-2">
                                <span>我的任务</span>
                            </el-menu-item>
                            <el-menu-item index="5-3">
                                <span>发起流程</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="6">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>全文档示例</span>
                            </template>
                            <el-menu-item index="6-1">
                                <span>全文档示例</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="7">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>数据库访问</span>
                            </template>
                            <el-menu-item index="7-1">
                                <span>数据库访问</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="8">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>测试页面</span>
                            </template>
                            <el-menu-item index="8-1">
                                <span>测试页面</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="9">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="9-1">
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="9-2">
                                <span>权限管理</span>
                            </el-menu-item>
                            <el-menu-item index="9-3">
                                <span>角色管理</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="10">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>代码生成</span>
                            </template>
                            <el-menu-item index="10-1">
                                <span>代码生成</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="11">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>系统管理</span>
                            </template>
                            <el-menu-item index="11-1">
                                <span>菜单设置</span>
                            </el-menu-item>
                            <el-menu-item index="11-1">
                                <span>下拉框绑定设置</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="12">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>日志管理</span>
                            </template>
                            <el-menu-item index="12-1">
                                <span>日志管理</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="13">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>(app)商品信息</span>
                            </template>
                            <el-menu-item index="13-1">
                                <span>商品分类</span>
                            </el-menu-item>
                            <el-menu-item index="13-2">
                                <span>商品信息</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="14">
                            <template #title>
                                <el-icon>
                                    <Menu />
                                </el-icon>
                                <span>(app)用户管理</span>
                            </template>
                            <el-menu-item index="14-1">
                                <span>用户管理</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
            </el-scrollbar>
        </div>
        <!-- 右侧内容 -->
        <div class="right">
            <div class="right_top">
                <div class="warnicon">
                    <el-icon color="#D68409" size="30px">
                        <WarningFilled />
                    </el-icon>
                </div>
                <div class="content">
                    <p>菜单配置说明</p>
                    <p>1、如果是用代码生器生成的Vue页面,Url为Vue项目中src->router->viewGrid.js对应表名的path属性</p>
                    <p>2、 如果只是建一级菜单或空菜单url不用填写,【视图/表名】填写.或者/</p>
                </div>
            </div>
            <div class="right_bottom">
                <!-- 第一行 -->
                <div class="details1">
                    <!-- 第一个 -->
                    <div class="interval">
                        <span>菜&nbsp;单&nbsp;ID：</span>
                        <input type="text" placeholder="0" style=" cursor: not-allowed;" disabled>
                    </div>
                    <!-- 第二个 -->
                    <div class="interval">
                        <span style="color:red;">*</span>
                        <span>父&nbsp;级&nbsp;ID：</span>
                        <el-input-number style="width:200px;height: 30px;" v-model="num" :min="0"
                            controls-position="right" />
                    </div>
                    <!-- 第三个 -->
                    <div class="interval">
                        <span style="color:red;">*</span>
                        <span>菜单名称：</span>
                        <input type="text" placeholder="请输入菜单名称">
                    </div>
                </div>
                <!-- 第二行 -->
                <div class="details1">
                    <!-- 第一个 -->
                    <div class="interval">
                        <span style="margin-left: -22px; color: red;">* </span>
                        <span>视图/表名：</span>
                        <input type="text" placeholder="与代码名称使用的名称相同">
                    </div>
                    <!-- 第二个 -->
                    <div class="interval">
                        <span style="margin-left: -10px;">(路由)Url：</span>
                        <input type="text" placeholder="请输入菜单配置说明">
                    </div>
                    <!-- 第三个 -->
                    <div class="interval">
                        <span style="color:red;">*</span>
                        <span>排序号：</span>
                        <el-input-number style="width:200px;height: 35px;" v-model="num1" :min="0"
                            controls-position="right" />
                    </div>
                </div>
                <!-- 第三行 -->
                <div class="details1">
                    <!-- 第一个 -->
                    <div class="interval">
                        <span style="margin-left: -14px; color: red;">* </span>
                        <span>是否启用：</span>
                        <el-select v-model="value" style="width: 200px;" placeholder="请选择是否启用">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <!-- 第二个 -->
                    <div class="interval" style="margin-left: 20px;">
                        <span style="margin-left: -35px; color: red;">* </span>
                        <span>菜单类型：</span>
                        <el-select v-model="value1" style="width: 200px;" placeholder="请选择菜单类型">
                            <el-option v-for="item in menu" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
                    </div>
                    <!-- 第三个 -->
                    <div class="interval" style="margin-right: 120px;">
                        <span>图标Icon：</span>
                        <el-button class="btnIcon">
                            <el-icon size="12px">
                                <Search />
                            </el-icon>
                            请选择图标
                        </el-button>
                    </div>
                </div>
                <!-- 权限 -->
                <div class="check">
                    <div class="power">
                        <div class="qx">权限按钮：</div>
                        <div class="checkbox">
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :key="city" :label="city">{{ city }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <!-- 全选，权限按钮 -->
                    <div class="twobtn">
                        <!-- 全选按钮 -->
                        <div class="all">
                            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate"
                                @change="handleCheckAllChange">
                                <span>全选</span></el-checkbox>
                        </div>
                        <!-- 其它权限按钮 -->
                        <div class="permission">
                            <el-button type="primary" plain @click="dialogFormVisible = true">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                                其它权限
                            </el-button>
                            <!-- 弹出框 -->
                            <el-dialog v-model="dialogFormVisible" width="600px">
                                <!-- 头部 -->
                                <template #header="{ close, titleId, titleClass }">
                                    <div class="my-header">
                                        <el-icon color="white">
                                            <Warning />
                                        </el-icon>
                                        <span :id="titleId" :class="titleClass">其它权限</span>
                                    </div>
                                </template>
                                <el-form :label-width="formLabelWidth">
                                    <!-- 名称输入框 -->
                                    <el-form-item label="权限名称:" :label-width="formLabelWidth">
                                        <el-input placeholder="权限名称,如：新增" v-model="city.name" />
                                    </el-form-item>
                                    <!-- 值输入框 -->
                                    <el-form-item label="权限值:" :label-width="formLabelWidth">
                                        <el-input placeholder="权限值,如：Add" v-model="city.price" />
                                    </el-form-item>
                                </el-form>
                                <!-- 关闭按钮 -->
                                <template #footer>
                                    <span class="btn-footer">
                                        <el-button @click="dialogFormVisible = false">关闭</el-button>
                                        <el-button type="primary" @click="add">确认</el-button>
                                    </span>
                                </template>
                            </el-dialog>
                        </div>
                    </div>
                </div>
                <!-- 五个按钮 -->
                <div class="fivebtn">
                    <div>
                        <el-button type="primary">
                            <el-icon>
                                <Check />
                            </el-icon>
                            保存
                        </el-button>
                    </div>
                    <div>
                        <el-button type="success">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新建
                        </el-button>
                    </div>
                    <div>
                        <el-button style="width:110px;" type="warning">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            添加子级
                        </el-button>
                    </div>
                    <div>
                        <el-button style="width:110px;" type="primary" plain>
                            <el-icon>
                                <CirclePlusFilled />
                            </el-icon>
                            添加同级
                        </el-button>
                    </div>
                    <div>
                        <el-button style="width:110px;" type="warning" plain>
                            <el-icon>
                                <Delete />
                            </el-icon>
                            删除菜单
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
// 导入icon图标
import { Menu, WarningFilled, Search, Plus, Check, CirclePlusFilled, Delete, Warning } from '@element-plus/icons-vue'
// 导入组合式api
import { ref } from 'vue'
// 父级初始值
let num = ref(0)
let num1 = ref(0)
// 启用
let value = ref('')
// 启用数组
let options = [
    {
        value: 'Option1',
        label: '启用',
    },
    {
        value: 'Option2',
        label: '启用不显示',
    },
    {
        value: 'Option3',
        label: '禁用',
    },
]
// 菜单
let value1 = ref('')
// 菜单类型数组
let menu = [
    {
        value: 'menu1',
        label: 'PC菜单',
    },
    {
        value: 'menu2',
        label: '移动端菜单',
    },
]
// 权限
let checkAll = ref(false)
// 全选状态
let isIndeterminate = ref(false)
// 当前选中状态数据
let checkedCities = ref(false)
// 选框数据
let cities = ref(['查询(Search)', '新建(Add)', '删除(Delete)', '编辑(Update)', '导入(Import)', '导出(Export)', '上传(Upload)', '审核(Audit)',])
// 权限数据
let city = ref({
    name: '',
    price: ''
})
// 单选状态
let handleCheckAllChange = (val) => {
    checkedCities.value = val ? cities.value : []
    isIndeterminate.value = false
}
// 全选状态
let handleCheckedCitiesChange = (value) => {
    console.log(value);


    if(cities.value.length==value.length){
        checkAll.value = true
    }else{
        checkAll.value = false
    }
}

// 权限弹出框状态
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

// 其他权限增加
let add = () => {
    // console.log(cities.value);
    if (cities.value.push(city.value.name + '(' + city.value.price + ')')){
        alert('添加成功！')
        dialogFormVisible.value = false
    }else{
        alert('添加失败！')
    }
}
</script>
<style scoped lang='scss'>
.box {
    width: 100%;
    height: 100%;
    background: #eee;
    display: flex;

    .left {
        width: 230px;
        margin: 10px;
        overflow: hidden;

        // overflow-y: auto;
        .one {
            line-height: 55px;
            background: #ecf5ff;
            display: flex;
            align-items: center;
            padding: 0 15px;

            span {
                margin: 0 5px;
                font-weight: bolder;
                font-size: 15px;
            }
        }

        .el-menu-item:hover {
            background: #ecf5ff !important;
        }
    }

    .right {
        margin-top: 10px;
        margin-right: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;

        .right_top {
            display: flex;
            align-items: center;
            background: #FDF6EC;
            border: 1px solid #FFE6C1;
            padding: 5px;

            .warnicon {
                margin-left: 10px;
            }

            .content {
                color: #E6A23C;
                font-size: 12px;

                p {
                    margin-left: 5px;
                    padding: 3px;
                }

                p:first-child {
                    color: #D68409;
                    font-weight: bolder;
                    font-size: 13px;
                }
            }
        }

        .right_bottom {
            background: #fff;
            flex: 1;
            margin-bottom: 10px;
            font-size: 14px;

            .details1 {
                margin: 30px 40px;
                display: flex;
                justify-content: space-between;

                .interval {
                    .btnIcon {
                        width: 80px;
                        border: 1px solid #B3D8FF;
                        background-color: #ECF5FF;
                        color: #409EFF;
                        font-size: 10px;

                        &:hover {
                            background: #409EFF;
                            color: white;
                            ;
                        }
                    }
                }


            }

            input {
                width: 200px;
                height: 30px;
                border: 1px solid #ccc;
                border-radius: 3px;
                text-indent: 15px;
                outline: none;
                text-overflow: ellipsis;
                overflow: hidden;

                &:hover {
                    border: 1px solid #409EFF;
                }
            }

            .check {
                .power {
                    display: flex;
                    margin-left: 55px;
                    align-items: center;

                    .qx {
                        width: 140px;
                        margin-bottom: 30px;

                    }
                }
            }

            .twobtn {
                display: flex;
                margin-left: 145px;
                margin-top: 5px;

                .all {
                    width: 80px;
                    height: 33px;
                    border: 1px solid #C2E7B0;
                    background: #F0F9EB;
                    margin-right: 10px;
                    text-align: center;
                    line-height: 33px;
                    border-radius: 3px;
                    background: #409EFF;

                    span {
                        color: white;
                    }
                }
            }

            .fivebtn {
                margin: 20px 0 0 185px;
                display: flex;

                .el-button {
                    margin-right: 10px;
                    width: 80px;
                    height: 35px;
                }
            }

        }
    }
}

// 弹窗头部背景颜色
.my-header {
    padding: 18px;
    width: 110.5%;
    background: linear-gradient(to right, #0cd7bd, #4cc4f3);
    margin: -20px 0 0 -20px;
    display: flex;
    align-items: center;

    span {
        color: white;
        font-size: 14px;
        font-weight: bolder;
        margin-left: 5px;
    }
}
</style>